<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>Login</title>

    <link href="../vendor/css/style.css" rel="stylesheet">
    <link href="../vendor/css/style-responsive.css" rel="stylesheet">
    <link href="../vendor/jgrowl/css/jquery.jgrowl.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="../vendor/js/html5shiv.js"></script>
    <script src="../vendor/js/respond.min.js"></script>
    <![endif]-->
</head>
<body class="login-body">

<div class="container">

    <form class="form-signin" action="/loginVerify" method="post">
        <div class="form-signin-heading text-center">
            <h1 class="sign-title">Login Rockets</h1>
            <img src="../vendor/images/rockets_logo.jpg" alt=""/>
        </div>
        <div class="login-wrap">

            <input type="text" name="username" class="form-control" placeholder="用户名" autofocus/>
            <input type="password" name="password" class="form-control" placeholder="密码"/>
            <input type="text" name="loginCaptcha" class="form-control" placeholder="验证码"
                   style="width: 60%; display:block; float:left;"/><img id="captchaImage" src="/loginCaptcha" style="display:block; float:left; margin-left: 6px; border-radius:6px;"/>

            <button class="btn btn-lg btn-login btn-block" type="submit">
                <i class="fa fa-check"></i>
            </button>

            <label class="checkbox">
                <input type="checkbox" value="remember-me"> Remember me
                <span class="pull-right">
                    <a href="javascript:forget()"> Forgot Password?</a>
                </span>
            </label>
        </div>

    </form>

</div>
<script src="../vendor/js/jquery-1.10.2.min.js"></script>
<script src="../vendor/js/bootstrap.min.js"></script>
<script src="../vendor/js/modernizr.min.js"></script>
<script src="../vendor/jgrowl/myJGrowl.js"></script>
<script src="../vendor/jgrowl/jquery.jgrowl.js"></script>
</body>
<script type="text/javascript">
    $(function () {
        #if(notBlank(message))
            $msg("#(message)", 10000, 'error');
        #end
        #if(notBlank(nameMessage))
            $msg("#(nameMessage)", 5000, 'error');
        #end
        #if(notBlank(passMessage))
            $msg("#(passMessage)", 5000, 'error');
        #end
        #if(notBlank(captchaMessage))
            $msg("#(captchaMessage)", 5000, 'error');
        #end
        $("#captchaImage").click(function () {
            var timestamp = (new Date()).valueOf();
            var imageSrc = $("#captchaImage").attr("src");
            if (imageSrc.indexOf("?") >= 0) {
                imageSrc = imageSrc.substring(0, imageSrc.indexOf("?"));
            }
            imageSrc = imageSrc + "?timestamp=" + timestamp + "&width=100&height=45&fontsize=35";
            $("#captchaImage").attr("src", imageSrc);
        });
    })
    var forget = function(){
        $msg("大哥别闹",5000,'success');
    }
</script>
</body>
</html>
